<template>
  <div>
    <div v-show="!empty" ref="chartContainer" :style="{ width: '100%', height: computedHeight }" />
    <px-empty v-if="empty" description="暂无数据" />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, computed, watch, onMounted, type Ref } from "vue";

import { useEchartsResize } from "@/hooks/useEchartsResize";
import type { ResponseDataOfInAndOutTrend } from "@/api/erc/spareParts/signboard";

import type { InAndOutCountTypeReverse, HeightType, PropsTypeForHealthAndType, EmitsTypeForHealthAndType } from "../type";

const props = defineProps<PropsTypeForHealthAndType<ResponseDataOfInAndOutTrend>>();
const emits = defineEmits<EmitsTypeForHealthAndType>();

const empty = ref(false);
const chartContainer: Ref<HTMLElement | null> = ref(null);
const chartInstance: Ref<echarts.ECharts | null> = ref(null);

const options: echarts.EChartsOption = {
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow"
    }
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: "category",
    data: []
  },
  color: ["#4786FF", "#14C7C7 "],
  legend: {},
  grid: {
    left: "3%",
    right: "4%",
    bottom: "0%",
    containLabel: true
  }
};

useEchartsResize(chartInstance, chartContainer, options);

const computedHeight = computed<HeightType>(() => {
  if (props.showTop5Data) {
    return "300px";
  }
  return "600px";
});

const formatData = computed<InAndOutCountTypeReverse | undefined>(() => {
  if (props?.data?.length) {
    return {
      xData: [
        {
          name: "入库",
          type: "bar",
          data: props.data.map(item => item.inValue).reverse()
        },
        {
          name: "出库",
          type: "bar",
          data: props.data.map(item => item.outValue).reverse()
        }
      ],
      yData: props.data.map(item => item.name).reverse()
    };
  }
  return undefined;
});

const isEmpty = () => {
  let flag = true;
  if (formatData.value?.xData?.length) {
    formatData.value.xData.forEach(item => {
      if (item?.data?.length) {
        item.data.forEach(count => {
          if (count > 0) {
            flag = false;
          }
        });
      }
    });
  }

  return flag;
};

const renderChart = (): void => {
  if (!isEmpty()) {
    empty.value = false;
    chartInstance.value.setOption({
      yAxis: {
        type: "category",
        data: formatData.value.yData || []
      },
      series: formatData.value.xData || []
    });
  } else {
    empty.value = true;
    emits("resetCode");
  }
};

const initEventListener = () => {
  chartInstance.value.on("click", params => {
    const name = params.name;
    let code = "";
    if (props?.data?.length) {
      for (let i = 0; i < props.data.length; i++) {
        const item = props.data[i];
        if (item.name === name) {
          code = item.code;
          break;
        }
      }
    }
    emits("pushCode", code);
    emits("getData", props.showTop5Data);
  });
};

watch(
  () => props.data,
  () => {
    renderChart();
  },
  {
    deep: true
  }
);

onMounted(() => {
  renderChart();
  initEventListener();
});
</script>
